import { Row } from 'antd';
import React from 'react'
import { Link, Switch } from 'react-router-dom';
import ReduxRouter from '../../../colyst/component/ReduxRouter';
import Atest from './Atest';
import Btest from './Btest';
import Ctest from './Ctest';

class UseDemo extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: [],
            res: '',
            isModalVisible: false,
            a: 11
        }
    }

    async init() {
        let data = [
            {
                id: 1,
                name: '/u/a'
            },
            {
                id: 2,
                name: '/u/b'
            },
            {
                id: 3,
                name: '/u/c'
            },
        ];
        return {data}
    }

    showModal = () => {
        this.setState({isModalVisible: true})
    };

    handleCancel = () => {
        this.setState({isModalVisible: false})
    };

    handleOk = () => {
        this.setState({isModalVisible: false})
    };

    async componentDidMount() {
        let {data} = await this.init();
        // let a = {a:1, b: 2}
        // let b = {...a, ...{b: 3, c:1}}
        this.setState({data})
    }

    render() {
        let {data} = this.state;
        // let {children} = this.props;
        return (
            <Row>
                <ul>
                    {
                        data.map(item => {
                            return(
                                <li key={item.id}>
                                    <Link to={item.name} >{item.name}</Link>
                                </li>
                            )
                        })
                    }
                </ul>
                <div>
                    <Switch>
                        <ReduxRouter path='/u/a' component={Atest} />
                        <ReduxRouter path='/u/b' component={Btest} />
                        <ReduxRouter path='/u/c' component={Ctest} />
                    </Switch>
                </div>
            </Row>
        );
    }
}
 
export default UseDemo;